<template>
  <div class="E-user-panel">
    <div class="wrap-head">
      <div class="top">
        <div class="image" @click="dispose('personal')">
          <img :src="profile.avatarUrl" />
        </div>
        <div @click="dispose('personal')" class="content text-ellipsis">{{profile.nickname}}</div>
      </div>
      <div class="buttom">
        <div class="box-btn" @click="dispose('dynamic-page')">
          <span class="num">{{profile.eventCount}}</span>
          <span>动态</span>
        </div>
        <el-divider direction="vertical" />
        <div class="box-btn" @click="dispose('attention-page')">
          <span class="num">{{profile.follows}}</span>
          <span>关注</span>
        </div>
        <el-divider direction="vertical" />
        <div class="box-btn" @click="dispose('fans-page')">
          <span class="num">{{profile.followeds}}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <el-divider />
    <ul class="list-btn">
      <li class="item" @click="dispose('vip')">
        <span class="wrap-left">
          <i class="el-icon-postcard" />
        </span>
        会员中心
        <span class="wrap-right">
          未订购
          <i class="el-icon-arrow-right" />
        </span>
      </li>
      <li class="item" @click="dispose('grade')">
        <span class="wrap-left">
          <i class="el-icon-guide" />
        </span>
        等级
        <span class="wrap-right">
          <i class="grade">LV.4</i>
          <i class="el-icon-arrow-right" />
        </span>
      </li>
      <li class="item" @click="dispose('shop')">
        <span class="wrap-left">
          <i class="el-icon-shopping-cart-2" />
        </span>
        商城
        <span class="wrap-right">
          <i class="el-icon-arrow-right" />
        </span>
      </li>
      <el-divider />
      <li class="item" @click="dispose('mes-set')">
        <span class="wrap-left">
          <i class="el-icon-setting" />
        </span>
        个人信息设置
        <span class="wrap-right">
          <i class="el-icon-arrow-right" />
        </span>
      </li>
      <li class="item" @click="dispose('binding')">
        <span class="wrap-left">
          <i class="el-icon-mobile" />
        </span>
        绑定社交帐号
        <span class="wrap-right">
          <i class="fa fa-weibo" />
          <i class="el-icon-arrow-right" />
        </span>
      </li>
      <el-divider />
      <li class="item" @click="dispose('quit')">
        <span class="wrap-left">
          <i class="el-icon-switch-button" />
        </span>
        退出登录
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('user', ['profile'])
  },
  methods: {
    ...mapActions('user', ['logout']),
    dispose(type) {
      console.log(type);
      if (type === 'quit') {
        this.logout();
      }
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.E-user-panel {
  width: 280px;
  $color: #eee;
  font-size: 12px;
  border-radius: 50px;
  & > .wrap-head {
    .top,
    .buttom {
      display: flex;
    }
    .top {
      padding: 10px 20px;
      $size: 40px;
      & > .image {
        position: relative;
        width: $size;
        height: $size;
        flex: 0 0 $size;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
      & > .content {
        height: $size;
        line-height: $size;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .buttom {
      margin-bottom: 10px;
      padding: 3px 0;
      justify-content: space-around;
      .el-divider--vertical {
        height: 38px;
      }
      & > .box-btn {
        width: 60px;
        text-align: center;
        cursor: pointer;
        & > span {
          display: block;
          &.num {
            font-weight: 600;
            font-size: 16px;
          }
        }
      }
    }
  }
  .el-divider {
    margin: 0;
    background: $color;
  }
  & > .list-btn {
    & > .item {
      height: 35px;
      line-height: 35px;
      padding: 0 5px;
      cursor: pointer;
      &:hover {
        background: $color;
      }
      i {
        vertical-align: middle;
        color: rgb(180, 180, 180);
        font-size: 18px;
        &.grade {
          font-size: 14px;
          font-weight: 600;
          font-family: -webkit-pictograph;
          color: #999;
        }
      }
      & > .text {
        vertical-align: middle;
      }
      & > .wrap-left {
        display: inline-block;
        text-align: center;
        width: 35px;
      }
      & > .wrap-right {
        float: right;
        & > .el-icon-arrow-right {
          font-size: 10px;
          margin-left: 3px;
          color: #ddd;
        }
      }
    }
  }
}
</style>
